<template>
  <div>
        <ul class="list">
           <li 
           v-for="item of alphabetList" 
           :key="item.id"
           @click="handleLetterClick"
           >{{item.content}}</li>
        </ul>
        <div 
        class="connect" 
        ref="distance"
        :style="hidden"
        >
            {{this.content}}
        </div>
  </div>
</template>

<script>
export default {
  props:{
      alphabetList:Array
  },
  methods:{
      handleLetterClick(e){  //当触发事件时传入这个事件的元素，也就是li
           this.content = e.target.innerText   //e就是li，这里需要li的内容
           //console.log(this.content);
           this.$emit("change",this.content)
           for( let i =0 ;i<this.alphabetList.length;i++){   //循环数组
               if(this.content === this.alphabetList[i].content ){  //如果点击的内容等于数组中的内容
                    let distance = 0.8 + ((i+1)*0.4)    //定义一个距离
                    const showElement = this.$refs.distance  //定义一个常量，$refs就是获取这个元素
                    showElement.style="display:block"        //让其成为行内元素
                    showElement.style='top:'+distance+"rem"  //让其距离顶端的距离为这个变量
                    setTimeout(() => {
                            showElement.style="display:none"   //1s 后隐藏
                    },1000);
               }
           }
      }
  },
  name: 'locationAlphabet',
  data(){
      return{
          hidden:{
              display:'none'
          },
          content:'',
      }
  },
}
</script>

<style lang="stylus"  scoped>
    .list
      position :fixed
      top:1.15rem
      right :0
      z-index:100
      text-align :center
      width :15%
      background :eff1f5
      padding-bottom :100rem
      opacity:.7
      color :#53cabf
    .list>li
      margin :.1rem 0
      font-weight:bold
    .connect
      position :absolute
      right :1.3rem
      z-index:100
      text-align :center
      background :rgba(80,180,0,.7)
      border-radius:.07rem
</style>